<template>
  <div>
    <div v-for="(item, index) in cart" :key="index">
      <van-checkbox
        v-model="item.checked"
        :checked="item.checked"
        @click="checked(item)"
      ></van-checkbox>
      <van-swipe-cell>
        <van-card
          :num="item.num"
          :price="item.originalPrice"
          :desc="item.characteristic"
          :title="item.name"
          :thumb="item.pic"
        >
          <template #num>
            <van-stepper
              v-model="item.num"
              theme="round"
              button-size="22"
              disable-input
              @plus="jia(item)"
              @minus="jian(item)"
            />
          </template>
        </van-card>

        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(index)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <div class="box"></div>
    <van-submit-bar :price="temp" button-text="提交订单">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
    <contents></contents>
  </div>
</template>

<script>
import contents from "../components/content/contents";
import Vue from "vue";
import { Card } from "vant";
import { Button } from "vant";
import { SubmitBar } from "vant";
import { Checkbox, CheckboxGroup } from "vant";
import { SwipeCell } from "vant";
import { Stepper } from "vant";

Vue.use(Stepper);
Vue.use(SwipeCell);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(SubmitBar);
Vue.use(Button);
Vue.use(Card);

export default {
  components: {
    contents,
  },
  data() {
    return {};
  },
  computed: {
    cart: function () {
      return this.$store.state.Cart.cart;
    },
    temp: function () {
      return this.$store.getters.price;
      // console.log();
    },
    allChecked: {
      //获取全选的状态
      get() {
        return this.$store.state.Cart.cart.every((element) => {
          return element.checked == true;
        });
      },
      set(newVal) {
        this.$store.commit("checkeds", newVal);
        // this.cartData = [...this.$store.state.cartList];  
      },
    },
  },

  methods: {
    del(index) {
      this.$store.dispatch("del", index);
    },
    jia(item) {
      this.$store.dispatch("jia", item);
    },
    jian(item) {
      this.$store.dispatch("jian", item);
    },
    checked(item) {
      this.$store.commit("checked", item);
    },
  },
};
</script>

<style>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.box {
  height: 100px;
}
</style>